<template>
	<view class="resetPassword">
		<view class="form">
			<view class="formItem">
				<button class="get-code" :style="{'color':getCodeBtnColor}" :disabled="getSmsCodeStatus" @click.stop="getCheckCode()">{{smsCodeText}}</button>
				<multi-input type="text" clearable v-model="phone" placeholder="请输入手机号" maxlength="11" iconColor="#474747" placeholder-style="color: rgba(71,71,71,0.8);"></multi-input>
				<!-- <input placeholder="请输入手机号" v-model="phone" placeholder-style="color: rgba(255,255,255,0.8);"/> -->
			</view>
			<view class="formItem">
				<multi-input type="text" clearable v-model="smsCode" placeholder="请输入验证码" maxlength="6" iconColor="#474747" placeholder-style="color: rgba(71,71,71,0.8);"></multi-input>
				<!-- <input placeholder="请输入验证码" v-model="smsCode" placeholder-style="color: rgba(255,255,255,0.8);"/> -->
			</view>
			<view class="formItem">
				<multi-input type="password" displayPassword v-model="password" placeholder="请输入密码" iconColor="#474747" placeholder-style="color: rgba(71,71,71,0.8);"></multi-input>
				<!-- <input placeholder="请输入密码" v-model="password" password=true placeholder-style="color: rgba(255,255,255,0.8);"/> -->
			</view>
			<view class="formItem">
				<multi-input type="password" displayPassword v-model="password2" placeholder="请再次输入密码" iconColor="#474747" placeholder-style="color: rgba(71,71,71,0.8);"></multi-input>
				<!-- <input placeholder="请再次输入密码" v-model="password2" password=true placeholder-style="color: rgba(255,255,255,0.8);"/> -->
			</view>
			<view class="tips">密码只能包含英文大小写、数字和下划线<br/>长度8-32位</view>
			<button class="btn" type="primary" @tap="doReg">修改密码</button>
		</view>
		
	</view>
</template>

<script>
	import multiInput from '../../components/multiInput.vue'
	
	export default {
		name: 'resetPassword',
		components: {
			multiInput
		},
		data() {
			return {
				phone: "",
				smsCode: '',
				password: "",
				password2: "",
				smsCodeText: '获取验证码',
				getCodeBtnColor: "#474747",
				getSmsCodeStatus: false,
        count: 60
			}
		},
		computed: {
      checkPhone () {//检查手机号正确性
        const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/; //正则表达式验证手机号格式
        if (this.phone == '') return '手机号为空';
        if(phoneReg.test(this.phone)) return true;
        else return '手机号格式错误';
      },
      checkPassword () {//验证密码正确性
        const passwordReg = /^([A-Z]|[a-z]|[0-9]|[_]){6,32}$/; //只能包含英文大小写、数字和下划线，长度8-32位
        if (this.password == '') return '密码为空';
        if(passwordReg.test(this.password)) return true;
        else return '密码格式错误';
      },
      checkSmsCode () {//检查验证码正确性
        const smsCodeReg = /^[0-9]{4,6}$/; //判断验证码长度正则表达式，4-6位
        if (this.smsCode == '') return '验证码为空';
        if(smsCodeReg.test(this.smsCode)) return true;
        else return '验证码格式错误';
      }
		},
		methods: {
			getCheckCode () {
				let phoneResult = this.checkPhone;
				if (!(typeof phoneResult == 'boolean' && phoneResult)){
					this.$UIplugins.message({message: phoneResult, type: 'error'});
				}else{
					this.getSmsCodeStatus = true;
					this.smsCodeText = " 发送中...";
					this.$api.user.sendSmsCode(this.phone, (res) => {
						if(res.status == 0) {
							this.getCodeBtnColor = "rgba(71,71,71,0.5)";
							this.countDown();
							this.$UIplugins.message({
								message: res.msg, 
								type: 'text'
							});
						}else {
							this.getSmsCodeStatus = false;
							this.smsCodeText = " 获取验证码";
						}
					})
				}
			},
			countDown () {
				if(this.count == 0) {
					this.getSmsCodeStatus = false;
					this.getCodeBtnColor = "#474747";
					this.smsCodeText = " 获取验证码";
					this.count = 60;
					return false;
				}else {
					this.getSmsCodeStatus = true;
					this.smsCodeText= " 重新发送(" + this.count + ")";
					this.count --;
				}
				let countDown = this.countDown;
				setTimeout(function() {
					countDown();
				},1000);
			},
			doReg(){
				uni.hideKeyboard();
				let phoneResult = this.checkPhone;
				let passwordResult = this.checkPassword;
        let smsCodeResult = this.checkSmsCode;
				if (!(typeof phoneResult == 'boolean' && phoneResult)){
					this.$UIplugins.message({message: phoneResult, type: 'error'});
				}else if (!(typeof passwordResult == 'boolean' && passwordResult)){
					this.$UIplugins.message({message: passwordResult, type: 'error'});
				}else if (!(typeof smsCodeResult == 'boolean' && smsCodeResult)){
          this.$UIplugins.message({message: smsCodeResult, type: 'error'});
        }else{
					if(this.password != this.password2){ 
						this.$UIplugins.message({message: '两次输入密码不一致', type: 'error'});
						return false; 
					}
					let reqParams = {
					  phone: this.phone,
					  checkCode: this.smsCode,
					  password: this.password
					}
					this.$api.user.ResetPassword( reqParams, (res) => {
						this.$UIplugins.message({
						  message: '修改成功',
						  closeCallback: () => {
								this.toLogin();
							}
						});
					});
				}
			},
			toLogin(){ 
				uni.hideKeyboard();
				this.$Router.replaceAll('/pages/login/Login');
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(to bottom, #eee 0%,#d8d8d8 100%);
		height: 100%;
		.resetPassword {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.logo {
				height: 200rpx;
				width: 200rpx;
				margin: 100rpx auto 50rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 100%;
				}
			}
			.form {
				width: 86%;
				padding: 40upx 7% 0;
				font-size: 30upx;
				.formItem{
					color:#474747;
					height: 90upx;
					display: flex;
					align-items: center;
					border-radius: 45upx;
					background-color: rgba($color: #474747, $alpha: 0.1);
					padding: 0 5%;
					width: 90%;
					margin-bottom: 26upx;
					position: relative;
					multi-input{width:100%;}
					.get-code{
						position: absolute;
						right: 80upx;
						z-index: 3;
						height: 90upx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin: 0 10upx;
						font-size: 28upx;
						padding: 0;
						background: transparent;
						// border-left: solid 1upx #fff;
						&:after {
							content: " ";
							width: 1upx;
							height: 50upx;
							background-color: #fff;
							position: absolute;
							z-index: 3;
							margin-right: 100%;
							left: 0;
							top: 20upx;
						}
					}
				}
				.btn {
					color: #000;
					width: 100%;
					height: 90upx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 45upx;
					background-color: #fff;
					border: solid 1upx #e2e2e2;
					box-shadow: 0 0 2upx rgba(0, 0, 0, .5);
					font-size: 40upx;
				}
			}
			.tips{
				ling-height: 20upx;
				color: #6D6D72;
				padding: 0 20upx;
				margin-bottom: 20upx;
			}
			.res {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100upx;
				color: rgba($color: #474747, $alpha: 0.8);
				.link{
					display: inline-block;color: #000;text-decoration: underline;
				}
			}
		}
	}
</style>
